import styled from 'styled-components'
export const DjradioInfoWrapper = styled.div`
 
`
export const ContentWrapper = styled.div`
 display:flex;
  .left{
    position:relative;
    .mask{
      width:208px;
      height:208px;
      position:absolute;
      background-position: 0 -1285px;
      top: -4px;
      left: -4px;
    }
  }
  .right{
    margin-left:20px;
    .title{
      display: flex;
      .icon{
        width: 55px;
        height: 24px;
        background-position: 0 -1014px;
        display: inline-block;
      }
      .name{
        margin-left:20px;
        font-size:20px;
        color:#333;
        margin-top:-2px;  
      }
    }
    .creator{
      display: flex;
      height:35px;
      margin-top:10px;
      cursor:pointer;
      .nickname{
        margin-left:10px;
        line-height:35px;
        color:#0C73C2;
        cursor:pointer;
        .icon{
          width: 13px;
          height:13px;
          display: inline-block;
          margin-left:5px;
        }
      }
    }
    .operation{
      display: flex;
      margin-top:20px;
      .oper{
        border-radius:5px;
        margin-left:10px;
        &:first-child{
          margin-left:0;
        }
      }
      .sub{
        background-position: 0 -2125px;
        padding-left: 30px;   
        color:#fff;
        height: 31px;
        line-height: 30px;
        width:95px;
      }
      .play{
        background-position: 0 -2285px;
        padding-left: 30px;
        height: 31px;
        line-height: 30px;
        width: 85px;
        border-right:1px solid #ccc;
      }
      .share{
        background-position: 0 -1225px;
        padding-left: 30px;   
        height: 31px;
        line-height: 30px;
        width:100px;
        border-right:1px solid #ccc;
      }
    }
    .desc{
      margin-top:20px;
      .category{
        color:#CC0000;
        border:1px solid #CC0000;
        text-align:center;
        padding:2px 5px;
        margin-right:10px;
      }
      white-space:pre-wrap;

    }
  }
`
export const NavWrapper = styled.div`
  display: flex;
  border-bottom:2px solid rgb(213,127,125);
  margin-top:20px;
  .title{
    font-size:20px;
    color:#333;
    font-weight:400;
  }
  .total{
    color:#999;
    font-size:12px;
    margin-left:30px;
    margin-top:10px;
  }
`